<template>
  <div ref="imageWrapper">
    <component
      :is="componentId"
      :record="record"
      :return-router-page="returnRouterPage"
      :returnRecord="returnRecord"
      @CheckGenerateResult="CheckGenerateResult"
      @GenerateResults="GenerateResults"
      @BackFristPage="BackFristPage"
      :resultPage="resultPage"
    ></component>
  </div>
</template>


<script>
import Detialpage from './Detialpage'
import DraftGenerator from './yjcgsc'
import DraftProduceResults from './yjcgzxjg'
export default {
  components: {
    Detialpage,
    DraftGenerator,
    DraftProduceResults,
  },
  data() {
    return {
      componentId: 'Detialpage',
      resultPage: {},
      record: {},
      returnRouterPage: false,
      returnRecord: {},
    }
  },
  watch: {
    $route: {
      handler: function (to) {
        // 区分是跳转过来的还是，直接点过来的
        if (Object.keys(to.params).length) {
          debugger
          let { componentName, accCode, accName, id, name, returnRecord } = to.params
          let { startDate, endDate } = JSON.parse(returnRecord)
          this.componentId = componentName

          this.record = {
            accCode,
            accName,
            id,
            name,
            startDate,
            endDate,
          }
          this.returnRecord = returnRecord
          // 因为是跳转过来的所以修改 返回按钮的操作
          this.returnRouterPage = true
          // debugger
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 结果组件
    CheckGenerateResult(id) {
      this.componentId = 'DraftProduceResults'
      this.resultPage = id
    },
    // 生成器组件
    GenerateResults() {
      this.componentId = 'DraftGenerator'
    },
    // 返回默认页
    BackFristPage() {
      this.componentId = 'Detialpage'
    },
  },
}
</script>
<style lang="less" scoped>
.card-radius {
  border-radius: 25px;
  height: 100%;
}
</style>
